import React, { Component } from "react";
import { Comment, Tooltip, List } from "antd";
import moment from "moment";
// -----------------------------------------

class commentList extends Component {
  state = {
    likes: 0,
    dislikes: 0,
    action: null,
    DataList: () => {
      let list = [];
      this.props.content.map(item => {
        let listItem = {
          actions: [<span>Reply to</span>],
          author: item.author,
          avatar:
            "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          content: <p>{item.content}</p>,
          datetime: (
            <Tooltip
              title={moment()
                .subtract(item.datetime, "days")
                .format("YYYY-MM-DD HH:mm:ss")}
            >
              <span>
                {moment()
                  .subtract(item.datetime, "days")
                  .fromNow()}
              </span>
            </Tooltip>
          )
        };
        list.push(listItem);
        return null;
      });
      return list;
    }
  };

  render() {
    return (
      <div>
        <List
          className="comment-list"
          header={`${this.state.DataList().length} replies`}
          itemLayout="horizontal"
          dataSource={this.state.DataList()}
          renderItem={item => (
            <Comment
              actions={item.actions}
              author={item.author}
              avatar={item.avatar}
              content={item.content}
              datetime={item.datetime}
            />
          )}
        />
      </div>
    );
  }
}
// -----------------------------------------
export default commentList;
